<template>
  <div>
    <!-- 老人管理 -->
    <!-- 搜索 -->
    <el-card class="card">
      <el-form ref="ruleFormRef" :inline="true" class="demo-form-inline" :model="params">
        <el-form-item label="老人姓名：" prop="name">
          <el-input v-model="params.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="身份证号：" prop="idCard">
          <el-input v-model="params.idCard" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="床位：" prop="begId">
          <el-cascader
            v-model="params.begId"
            :props="props"
            :options="getcounts"
            clearable
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="状态：" prop="state">
          <el-select v-model="params.state!" clearable style="width: 200px">
            <el-option v-for="item in stateList" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="card">
      <ELTable v-bind="tableConfig" ref="elderlyTable">
        <template #gender="{ scope }">
          {{ scope.row.gender == 1 ? "男" : "女" }}
        </template>
        <template #operate="{ scope, deleteHandle }">
          <el-button type="primary" :icon="Edit" text @click="update(scope.row.id)">编辑</el-button>
          <el-button type="primary" :icon="Memo" text @click="toRecord(scope.row.id)">
            档案管理
          </el-button>
          <el-button type="primary" :icon="Notebook" text @click="toWork(scope.row.id)">
            排班管理
          </el-button>
          <el-button type="danger" :icon="Delete" text @click="deleteHandle(scope.row.id)">
            删除
          </el-button>
          <el-button type="primary" :icon="Tickets" text @click="toSchedule(scope.row.id)">
            计划任务
          </el-button>
        </template>
        <template #btns="{ deleteAll }">
          <el-button type="primary" @click="add">新增老人</el-button>
          <el-button :icon="Delete" type="danger" @click="deleteAll">批量删除</el-button>
        </template>
      </ELTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { bedList } from "@/api/config/bed/bed";
import { buildTree } from "@/utils/treeUtil";
import { badListParams } from "@/api/config/bed/type";
import { houseList } from "@/api/config/house/house";
import { listParams } from "@/api/config/house/type";
import { buildingListData } from "@/api/config/building/type";
import { buildingList } from "@/api/config/building/building";
import { Tickets, Memo, Delete, Edit, Search, Refresh, Notebook } from "@element-plus/icons-vue";
import { FormInstance } from "element-plus";
import { ListParams } from "@/api/market/elderly/type";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { getElderlyList, delElderly, delElderlyMany } from "@/api/market/elderly/elderly";

const elderlyTable = ref();
const router = useRouter();

//级联选择器格式转换
const props = { label: "name", value: "id" };
// 楼栋列表
const buildList = ref<buildingListData[]>([]);
const getBuildingList = async () => {
  let res = await buildingList();
  buildList.value = res.list;
  getHouseList();
};

//房间列表
const houseParams = reactive<listParams>({
  page: 1,
  pageSize: 1000,
  name: "",
  buildingId: undefined,
});
const house_list = ref<any[]>([]);
const getHouseList = async () => {
  let res = await houseList(houseParams);
  house_list.value = res.list.map((item) => ({
    id: item.id,
    name: item.name,
    pid: item.buildingId,
  }));
  getBedList();
};
//床位
const bedParams = reactive<badListParams>({
  houseId: undefined,
  page: 1,
  pageSize: 1000,
});
const bedListData = ref<any>([]);
const getBedList = async () => {
  let res = await bedList(bedParams);
  bedListData.value = res.list.map((item) => ({
    id: item.id,
    name: item.name,
    pid: item.houseId,
  }));
  mergeData([...buildList.value, ...house_list.value, ...bedListData.value]);
};

//选择床位
const handleChange = (data: any) => {
  // console.log("7777data",data);

  if (data) {
    bedParams.houseId = data[data.length - 1];
    params.begId = data[data.length - 1];
    getBedList();
  }
};

// 合并
const getcounts = ref([]);
const mergeData = (data: any) => {
  getcounts.value = buildTree(data);
  // console.log("getCounts999",getcounts.value);
};

const ruleFormRef = ref<FormInstance>();

//状态
const stateList = ref([
  { id: 1, name: "未签约" },
  { id: 2, name: "预约中" },
  { id: 3, name: "已出院" },
]);

//查询参数
const params = reactive<ListParams>({});

//查询
const search = () => {
  elderlyTable.value.getData(params);
};
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//表格数据
const tableConfig = reactive<TableData>({
  loadData: getElderlyList,
  delete: delElderly,
  deleteAll: delElderlyMany,
  columns: [
    {
      prop: "id",
      label: "序号",
    },
    {
      prop: "photo",
      label: "头像",
      image: true,
    },
    {
      prop: "name",
      label: "老人姓名",
    },
    {
      prop: "gender",
      label: "性别",
      slot: true,
    },
    {
      prop: "idCard",
      label: "身份证号",
    },
    {
      prop: "begName",
      label: "床位",
    },
    {
      prop: "stateName",
      label: "状态",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: 550,
      },
    },
  ],
});
//添加
const add = () => {
  router.push("/market/elderly-add");
};
//修改
const update = (id: number) => {
  router.push(`/market/elderly-edit/${id}`);
};

//跳转档案管理
const toRecord = (id: number) => {
  router.push(`/market/records?id=${id}`);
};
//跳转排版管理
const toWork = (id: number) => {
  router.push(`/market/work?id=${id}`);
};
//跳转计划任务
const toSchedule = (id: number) => {
  router.push(`/market/schedule?id=${id}`);
};

onMounted(() => {
  getBuildingList();
});
</script>

<style scoped>
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
